import { createApp, ref, provide } from "vue";
import App from "./App.vue";
import router from "./router";
import { pinia } from "./store";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import "element-plus/theme-chalk/dark/css-vars.css";
import "@/styles/index.css";
import * as ElementPlusIconsVue from "@element-plus/icons-vue";
import "virtual:windi.css";
import gsap from "gsap";

const isDarkMode = ref(false);
const toggleDarkMode = () => {
  isDarkMode.value = !isDarkMode.value;
  const htmlElement = document.documentElement;
  if (isDarkMode.value) {
    htmlElement.classList.add("dark");
  } else {
    htmlElement.classList.remove("dark");
  }
};

const app = createApp(App);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component);
}
app.provide("isDarkMode", isDarkMode);
app.provide("toggleDarkMode", toggleDarkMode);
app.use(router);
app.use(pinia);
app.use(ElementPlus);
app.use(gsap);
app.mount("#app");
